import React,{useState,useEffect} from 'react';
import "./recordRanking.scss";
import {getRecordRangking,getAnswerRangking} from "../../../../api/myRecord"
import {Table} from "antd"
const { Column } = Table;
const RecordRanking = () => {
    useEffect(()=>{
        getAll()
    },[])
    const [list,setList] = useState([]) 
    const [recordRangking,setRecordRangking] = useState([])
    const [answerRangking,setAnswerRangking] = useState([])
    const [flag,setFlag] = useState(false)
    const getAll = async() => {
        let res = await getRecordRangking()
        setRecordRangking(res.data.rows)
        let result = await getAnswerRangking()
        setAnswerRangking(result.data.rows)
        setList(res.data.rows)
    }
    const getRang = () => {
        setFlag(false)
        setList(recordRangking)
    }
    const getAnswer = () => {
        setFlag(true)
        setList(answerRangking)
    }
    return (
        <div id="recordRanking">
            <h1><span className={flag?"":"active"} onClick={()=>{
                getRang()
            }}>面试记录榜单</span><span className={flag?"active":""} onClick={()=>{
                getAnswer()
            }}>面试题榜单</span></h1>
            <Table dataSource={list}>
                <Column title="排名" dataIndex="rangking"/>
                <Column title="提交人" dataIndex="commitName"/>
                <Column title="面试记录提交数" dataIndex="count" />
                <Column title="班级" dataIndex="className" />
                <Column title="专业" dataIndex="majorName" />
            </Table>
        </div>
    );
};

export default RecordRanking;